<template>
 <div class="headNav d-flex fixed-top container-fluid pr-0" >

   <div class="d-flex w-100 justify-content-center align-items-center">
    <nav class="navbar navbar-expand-lg col-lg-4 col-12 navbar-light p-0 ">

     <a href="" class="navbar-brand ml-2 ml-lg-0" v-if="!backBtn">
      <img  class="logo img-fluid  " src="../../assets/imgs/mylogo.jpg" alt="">
    </a>
	<i class="iconfont icon-fanhui p-2" v-else @click="$router.back(-1)"></i>
   <form class="form-inline font-weight-bold head-title p-2 d-block d-lg-none text-center text-white col-7 ">
    {{header}}    
	</form>
    <!-- 头像信息 -->
      
		  <router-link to="/writeBlog">
			  <i class="iconfont icon-fabu" ></i>
		  </router-link>
	  
       <!-- <button class="navbar-toggler ml-0 mr-2"  type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button> -->

      <div class="collapse navbar-collapse" ref='menu'  id="navbarSupportedContent" >
          <ul class="nav nav-pills ">
              <li class="nav-item ml-lg-2 pl-2" >
                <router-link to="/homePage/shareSquare" class="nav-link" >广场</router-link>

              </li>
              <li class="nav-item ml-lg-2 pl-2" >
                <router-link to="/homePage/technologyCenter" class="nav-link">技术</router-link>

              </li>
              <li class="nav-item ml-lg-2 pl-2" >
                <router-link to="/homePage/fileShop" class="nav-link">素材</router-link>

              </li>
              <li class="nav-item ml-lg-2 pl-2" >
                <router-link to="/homePage/daily" class="nav-link">日记</router-link>

              </li>
              <li class="nav-item ml-lg-2 pl-2" >

                <router-link to="/homePage/messageWall" class="nav-link">留言墙</router-link>

              </li>

            </ul>

            <form class="form-inline p-2  d-lg-none d-block  ">
              <input class="form-control mr-md-2 col-8" type="search" v-model="searchWord" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success  ml-2 d-none d-lg-block" @click="toSearch" type="button">Search</button>
              <br class="d-block d-lg-none">
              <router-link v-if="getLogin" class="btn  btn-outline-success ml-2" to="/writeBlog">写博客</router-link>

          </form>
        </div>

  </nav>
  <div class="col-lg-1 col-none"></div>
   <form class="form-inline p-2  d-lg-block  d-none">
              <input class="form-control mr-md-2 col-8" v-model="searchWord"  type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success  ml-2 "  @click="toSearch"  type="button">Search</button>


              <router-link class="btn btn-outline-success  ml-2" v-if="getLogin" to="/writeBlog">写博客</router-link>

    </form>

    <div class="  user-icon d-none d-lg-block ml-md-4" @click="toUser">
              <img src="../../assets/imgs/mylogo.jpg" class="hidden-sm m-auto" alt="">

    </div>
  </div>
  <!-- 手机导航的顶部 -->

 </div>

</template>

<script>
  import {mapGetters} from 'vuex'
 export default {
   data () {
     return {
        activeIndex: '1',
        activeIndex2: '1',
        searchInput:"",
        isShow:false,
		backBtn:false,
        searchWord:'',
     }
   },
   props:['header'],
   computed:{
     ...mapGetters(['getLogin'])
   },
   components: {

   },
   methods:{
     //去个人主页
     toUser(){
       //判断登录否
       if(this.getLogin){
         //去个人界面
          this.$router.push({path: 'my'})
       }else{
         //去登录界面
         this.$router.push({path: 'login'})
       }
      },
      unshow(){
        console.log(this.$refs.menu);
        this.$refs.menu.className = 'navbar-collapse collapse '
      },

	  toSearch(){
		  this.$router.push({path: 'searchWall?word=' + this.searchWord})
	  }
   },
   watch:{
	$route(path,from){
		console.log(path);
		if(path.path=='/homePage/readArticle'){
			this.backBtn=true;
		}else{
			this.backBtn=false;
		}
		// homePage/readArticle
	}
   }
 }
</script>

<style scoped lang='less'>
	.icon-fanhui{
		color: white;
		font-size: 2rem;
		
	}
	.head-title{
		font-size: 1.3rem;
		padding-right: 2.7rem !important;
	}
	.icon-fabu{
		color: cornflowerblue;
	}
  .collapse{
    transition: all 0.5s ease;
    }
  .headNav{
      z-index: 1000;
    //  position: fixed;
    //  display: flex;
    //  justify-content: space-around;
    //  align-items: center;
    flex-wrap: nowrap;
     width: 100%;
     background: rgb(84, 92, 100);

     top: 0;
     .logo{
      width: 53px;
      height:60px;
     }
     .search-input{
       width: 10rem;
     }
     ul{
       border-bottom: 0 solid #000;
     }
     .user-icon{
        height: 40px;
         display: flex ;
         color:white;
         justify-content: center;
         align-items: center;
       img{
         height: 40px;
         width: 40px;
         border-radius: 50%;
         margin-right: 10px;
       }
     }
     .active{
       color: rgb(255, 208, 75) !important;
        background-color: rgb(67, 74, 80)
     }
     .nav-link{
       color:#fff;
     }
     .img-fluid{
       max-width: 100%;
        height: auto;
     }
  }

</style>
